<template>
	<!-- 数据表选择器 -->
	<uni-data-select v-model="selectData.selected" :localdata="selectData.selectList" @change="changeTable()"></uni-data-select>
	<!-- 字段选择器 -->
	<uni-data-checkbox mode="tag" multiple v-model="fieldData.selectedField" :localdata="fieldData.allField"></uni-data-checkbox>
	<!-- 数据展示图表 -->
	<view class="tableCon">
		<view class="table" ref="table">
			<view class="tr">
				<view class="th" style="background-color: #f2f2f2;color:black" align="center" v-for="(item2,key2,index2) in fieldData.allField" :style="fieldData.selectedField.indexOf(item2.value) > -1 ? '' : 'display:none;'">{{item2.value}}</view>
			</view>
			<view class="tr" v-for="(item, index) in tableData" :key="index">
				<view class="td" @click="changeData(item)" align='center' v-for="(item2,key2,index2) in fieldData.allField" :style="fieldData.selectedField.indexOf(item2.value) > -1 ? '' : 'display:none;'">{{item[item2.value]}}</view>
			</view>
		</view>
	</view>
	<!-- 分页器 -->
	<uni-pagination :total="pageData.pageMax" :pageSize="pageData.pageSize" v-model="pageData.page" @change='refresh()'></uni-pagination>
	<!-- 查询栏 -->
	<view class="tools">
		<button @click="refresh()">查询</button>
		<uni-section style="border-bottom: 5rpx solid #f2f2f2;" :title="key" type="line" v-for="(item,key,index) in searchData">
			<template v-slot:right>
			  <uni-easyinput style="border: 1rpx solid black;border-radius: 10rpx;text-align: right;" trim="all" v-model="searchData[key]"></uni-easyinput>
			</template>
		</uni-section>
	</view>
	<!-- 弹出层 -->
	<uni-drawer ref="showLeft" mode="left" :width="320">
		<button @click="submit">提交修改</button>
		<uni-section style="border-bottom: 5rpx solid #f2f2f2;" :title="key" type="line" v-for="(item,key,index) in submitData">
			<template v-slot:right>
			  <uni-easyinput style="border: 1rpx solid black;border-radius: 10rpx;text-align: right;" trim="all" v-model="submitData[key]"></uni-easyinput>
			</template>
		</uni-section>
	</uni-drawer>
</template>


<script>
	import config from '../../../utils/config.js'
	export default {
		data(){
			return{
				selectData:{
					selected: '',
					selectList: [
						{value:'app_store_user', text: '用户管理'}, 
						{value:'app_store_order', text: '订单管理'}, 
						{value:'app_store_trade', text: '交易管理'}, 
						{value:'app_store_sp', text: '商品管理'},
						{value:'app_store_djglist', text: '外加工管理'},
						{value:'app_store_wxuser', text: '小程序用户管理'},
					]
				},
				tableData:[],
				pageData:{
					page:1,
					pageSize:10,
					pageMax:1,
				},
				searchData:{},
				fieldData:{
					allField:[],
					selectedField:[],
				},
				submitData:{},
			}
		},
		methods:{
			// 修改数据表格
			changeTable(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getFiledFromTable",
					data:{
						table: that.selectData.selected,
					}
				}).then(res => {
					// 构建搜索栏和字段栏
					that.searchData = {}
					that.fieldData = {allField:[], selectedField:[]}
					for (let i=0;i<res.data.length;i++){
						that.searchData[res.data[i]] = ''
						// that.fieldData.selectedField.push(res.data[i])
						that.fieldData.allField.push({'value': res.data[i], 'text': res.data[i]})
					}
					that.fieldData.selectedField.push('id')
				})
				this.refresh()
			},
			// 获取数据
			refresh(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getSpDataBySql",
					data:{
						table: that.selectData.selected,
						pageData: that.pageData,
						searchData: that.searchData,
					}
				}).then(res => {
					// 处理数据
					for (let i = 0;i<res.data.length;i++){
						let tdata = res.data[i]
						for (let key in tdata){
							if (tdata[key] === null){
								continue
							}
							if (tdata[key].toString().indexOf("T") > -1 && tdata[key].toString().indexOf(":") > -1){
								tdata[key] = tdata[key].replace("T", " ")
							}
						}
					}
					that.tableData = res.data
					that.pageData.pageMax = res.num
				})
			},
			// 单机修改数据
			changeData(data){
				this.submitData = data
				this.$refs['showLeft'].open()
			},
			// 提交修改
			submit(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/updateTableData",
					data:{
						table: that.selectData.selected,
						submitData: that.submitData,
					}
				}).then(res => {
					uni.showToast({
						title: res.data,
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					this.$refs['showLeft'].close()
				})
			}

		}
	}
</script>

<style lang="scss">
	.tableCon{
		width: 100%;
		overflow-y: auto;
		overflow-x: auto;
	}
	.table{
		margin: 0 auto;
		padding: 0;
		font-family: Arial, 宋体, Helvetica, sans-serif;
		.tr{
			display: table-row; 
			height: 50rpx;
			.th{
				display: table-cell;
				font-weight: bold;
				height: 100%;
				text-align: center;
				vertical-align: middle;
				border-bottom: 1px solid gray;
				padding: 10rpx;
			}
			.td{
				margin: 5rpx;
				display: table-cell; 
				height: 100%;
				border-bottom: 1px solid gray; 
				padding: 10rpx;
				text-align: center;
				white-space:nowrap;
			}
		}
	}
</style>